<!-- 订单-订单信息 -->
<template>
  <view class="content">
    <view class="page">
      <view
        class="form-box"
        :class="{ checkCode: model.phone !== userInfo.phone }"
      >
        <u--form
          labelPosition="left"
          :model="model"
          ref="uForm"
          labelWidth="96rpx"
          :labelStyle="{ fontSize: '28rpx', color: '#0F0D21' }"
        >
        <u-form-item label="场地" prop="businessName" borderBottom>
            <u--input
              disabled
              v-model="model.businessName"
              border="none"
              placeholderClass="placeholder"
              placeholder="请输入您的称呼"
            ></u--input>
          </u-form-item>
          <u-form-item label="主题" prop="title" borderBottom>
            <u--input
              disabled
              v-model="model.title"
              border="none"
              placeholderClass="placeholder"
              placeholder="请输入您的称呼"
            ></u--input>
          </u-form-item>
          <u-form-item label="时间" prop="date" borderBottom>
            <view class="date" @click="handleChangeDate">
              {{model.date}}
            </view>
          </u-form-item>
          <u-form-item label="姓名" prop="name" borderBottom>
            <u--input
              v-model="model.name"
              border="none"
              placeholderClass="placeholder"
              placeholder="请输入您的称呼"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="手机"
            prop="phone"
            :borderBottom="model.phone !== userInfo.phone"
          >
            <u--input
              v-model="model.phone"
              :maxlength="11"
              border="none"
              placeholderClass="placeholder"
              placeholder="请输入您的联系电话"
            ></u--input>
            <view
              v-if="model.phone !== userInfo.phone"
              class="btn"
              @tap="handleSms()"
            >
              {{ sss > 0 ? `${sss}秒` : "获取验证码" }}
            </view>
          </u-form-item>
          <u-form-item
            label="验证码"
            prop="checkCode"
            v-if="model.phone !== userInfo.phone"
          >
            <u--input
              v-model="model.checkCode"
              border="none"
              placeholderClass="placeholder"
              placeholder="请输入验证码"
            ></u--input>
          </u-form-item>
        </u--form>
      </view>
      <view class="pay-box" v-if="!!payCategory">
        <view>
          <radio-group @change="radioChange" class="recharg-box">
            <label
              v-for="(item, index) in payTypeList"
              :key="item.code"
              class="recharg-box-c"
            >
              <image :src="item.img"></image>
              <text class="item">{{ item.type }}</text>
              <radio
                class="radio"
                color="#F7A254"
                :value="item.code"
                :checked="item.code === current"
              />
              <view class="type-bord" v-if="index == 0"></view>
            </label>
          </radio-group>
        </view>
      </view>
      <view class="submit" @click="submit"> 提交 </view>
    </view>
      <u-datetime-picker
          :itemHeight="70"
          :minDate="minDate"
          @cancel="show = false"
          @confirm="handleConfirm"
          :show="show"
          v-model="datetime"
          mode="date"
        >
      </u-datetime-picker>
  </view>
</template>

<script>
import { reservation } from "@/api/cityParty.js";
import validation from "@/utils/test";
import { getCreateCode } from "@/api/user.js";
import { mapState } from "vuex";
import dayjs from 'dayjs';
export default {
  data() {
    return {
      payTypeList: [
        {
          type: "微信",
          code: "wx",
          img: "../../static/images/wxPay.png"
        },
        {
          type: "余额",
          code: "balance",
          img: "../../static/images/balancePay.png"
        },
      ],
      current: "wx",
      businessName: '',
      model: {
        name: "",
        phone: "",
        checkCode: "",
        date: '',
        title: '',
        businessName: '',
      },
      datetime: 0,
      show: false,
      payCategory: 0,
      sss: 0,
      codeInterval: "",
      isSms: false,
      minDate: dayjs().valueOf(),
    };
  },
  watch: {
    'model.date'(val){
      this.datetime = dayjs(val).valueOf();
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  onLoad() {
    this.id = Number(this.$route.query.id);
    this.model.date = this.$route.query.orderDate;
    this.datetime = dayjs(this.$route.query.orderDate).valueOf();
    this.model.businessName = this.$route.query.businessName;
    this.model.title = this.$route.query.title;
    this.payCategory = Number(this.$route.query.payCategory);
  },
  created() {
    this.model.name = this.userInfo.nickName;
    this.model.phone = this.userInfo.phone;
  },
  methods: {
    handleConfirm({value}){
      this.model.date = dayjs(value).format('YYYY-MM-DD');
      this.show = false;
    },
    handleChangeDate(){
      this.show = true;
    },
    handleSms() {
      if (this.sss > 0) return;
      if (!this.model.phone)
        return uni.showToast({
          duration: 5000,
          title: "请输入联系手机号",
          icon: "none",
        });
      else if (!validation.mobile(this.model.phone))
        return uni.showToast({
          duration: 5000,
          title: "请输入正确的手机号码",
          icon: "none",
        });

      getCreateCode(this.model.phone, {
        type: 2,
      }).then((res) => {
        if (res.code !== 200) {
          return uni.showToast({
            duration: 5000,
            icon: "none",
            title: res.msg || "请求失败",
          });
        }
        this.sss = 60;
        this.codeInterval = setInterval(() => {
          if (this.sss === 0) {
            clearInterval(this.codeInterval);
            this.codeInterval = null;
            return;
          }
          this.sss--;
        }, 1000);
        this.isSms = true;
        uni.showToast({
          duration: 5000,
          title: "发送成功，请注意查收",
          icon: "none",
        });
      });
    },
    radioChange(evt) {
      this.current = evt.detail.value;
    },
    async submit() {
			const that = this;
      if (!this.model.name) {
        return uni.showToast({
          duration: 5000,
          icon: "none",
          title: "请输入您的称呼",
        });
      }
      if (!this.model.phone) {
        return uni.showToast({
          duration: 5000,
          icon: "none",
          title: "请输入您的联系电话",
        });
      }
      if (!this.model.date) {
        return uni.showToast({
          duration: 5000,
          icon: "none",
          title: "请选择时间",
        });
      }
      if (this.model.phone !== this.userInfo.phone && !this.isSms) {
        return uni.showToast({
          duration: 5000,
          icon: "none",
          title: "请先获取验证码",
        });
      }
      if (this.model.phone !== this.userInfo.phone && !this.model.checkCode) {
        return uni.showToast({
          duration: 5000,
          icon: "none",
          title: "验证码不能为空",
        });
      }
      // 支付方式：0-余额；1-微信；2-支付宝
      const payMap = {
        balance: 0,
        wx: 1,
        zfb: 2,
      };
      const partyId = parseInt(this.id);
      const payType = parseInt(payMap[this.current]);
      const params = {
        checkCode: this.model.checkCode,
        contact: this.model.name,
        orderDate: this.model.date,
        partyId: partyId,
        payType: payType,
        phone: this.model.phone,
      };
      let res = await reservation(params);
      if (res.code !== 200) {
        uni.showToast({
          duration: 5000,
          icon: "none",
          title: res.msg || "请求失败",
        });
        return;
      }
      if (!this.payCategory || this.current == 'balance') {
        uni.showToast({
          duration: 2000,
          icon: "none",
          title: "预定成功",
        });
        setTimeout(() => {
          this.$nextTick(() => {
            uni.reLaunch({
              url: "/pages/cityOrder/index",
            });
          });
        }, 1000);
      } else {
        const payConfig = res.data.result.jsConfig;
        const wxparam = {
          appId: payConfig.appId,
          timeStamp: payConfig.timestamp,
          nonceStr: payConfig.nonceStr,
          package: payConfig.package,
          signType: payConfig.signType,
          paySign: payConfig.paySign,
        };
        uni.showLoading({
          title: "支付中",
        });
        //调用微信支付
        if (typeof WeixinJSBridge == "undefined") {
          if (document.addEventListener) {
            document.addEventListener(
              "WeixinJSBridgeReady",
              this.wxAppFn(params),
              false
            );
          } else if (document.attachEvent) {
            document.attachEvent("WeixinJSBridgeReady", this.wxAppFn(params));
            document.attachEvent("onWeixinJSBridgeReady", this.wxAppFn(params));
          }
        } else {
          this.wxAppFn(wxparam);
        }
      }
    },
    wxAppFn(params) {
      const that = this;
      WeixinJSBridge.invoke("getBrandWCPayRequest", params, function (res) {
        if ("get_brand_wcpay_request:ok" === res.err_msg) {
          that.handlePay("success");
          // 使用以上方式判断前端返回,微信团队郑重提示：
          // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          // alert('get_brand_wcpay_request:ok')
        } else if (
          res.err_msg === "get_brand_wcpay_request:cancel" ||
          res.err_msg === "get_brand_wcpay_request:fail"
        ) {
          that.handlePay("error");
        } else {
          that.handlePay("error");
        }
      });
      uni.hideLoading({
        title: "支付中",
      });
    },
    handlePay(type) {
      if (type === "success") {
        uni.showToast({
          duration: 2000,
          icon: "none",
          title: "支付成功",
        });
        setTimeout(() => {
          this.$nextTick(() => {
            uni.reLaunch({
              url: "/pages/cityOrder/index",
            });
          });
        }, 1000);
      } else if (type === "error") {
        uni.showToast({
          duration: 2000,
          icon: "none",
          title: "支付失败，请重新支付",
        });
        setTimeout(() => {
          this.$nextTick(() => {
            uni.reLaunch({
              url: "/pages/cityOrder/index",
            });
          });
        }, 2000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>

.btn {
  background: linear-gradient(180deg, #e27c8a 0%, #ec606f 100%);
  color: #fff;
  font-size: 22rpx;
  padding: 10rpx 20rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.submit {
  position: fixed;
  bottom: 32rpx;
  width: 686rpx;
  height: 88rpx;
  border-radius: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #e27c8a 0%, #ec606f 100%);
  font-size: 36rpx;
  font-weight: 500;
  text-align: center;
  color: #fdf3f3;
}

.content {
  position: relative;
  box-sizing: border-box;

  &::before {
    display: inline-block;
    content: "";
    width: 750rpx;
    height: 561rpx;
    background: linear-gradient(
      180deg,
      rgba(238, 212, 215, 0.8) 0%,
      rgba(202, 191, 192, 0) 100%
    );
  }

  .page {
    position: absolute;
    top: 0;
    width: calc(100% - 60rpx);
    padding: 48rpx 30rpx 0 30rpx;

    .form-box {
      height: 420rpx;
      width: 626rpx;
      border-radius: 16rpx;
      background: #ffffff;
      box-shadow: 0px 0px 16rpx 6rpx rgba(210, 211, 213, 0.5);
      padding: 20rpx 32rpx 30rpx 32rpx;
      .date{
        width: 100%;
        padding: 4rpx 0;
        font-size: 30rpx;
      }

    }

    .checkCode {
      height: 500rpx;
    }
  }
}
/deep/ .form-box .u-input--square{
  background-color: transparent !important;
}

/deep/ .placeholder {
  font-size: 28rpx;
  color: #8c8a8a !important;
}

.pay-box {
  width: 626rpx;
  height: 128rpx;
  border-radius: 16rpx;
  padding: 0 32rpx;
  box-shadow: 0px 0px 16rpx 6rpx rgba(210, 211, 213, 0.5);
  margin-top: 32rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;

  .title {
    color: #0f0f0f;
    font-size: 32rpx;
    margin-bottom: 46rpx;
  }

  .btm-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24rpx;

    &:last-child {
      margin-bottom: 0;
    }

    & > text {
      color: #0f0d21;
      font-size: 28rpx;

      &:last-child {
        color: #cf0000;
      }
    }

    .coupon {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;

      .coupon-name {
        & > text {
          font-size: 20rpx;
          padding: 0 15rpx;
          border-radius: 17rpx;
          color: #cf0000;
          left: 165rpx;
          margin-top: 5rpx;
          background-color: rgba(243, 48, 48, 0.1);
        }
      }

      .coupon-money {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24rpx;
        color: #cf0000;
      }
    }

    .coupon-check {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      font-size: 20rpx;
      // padding: 0 15rpx;

      & > text {
        padding: 0 15rpx;
        border-radius: 17rpx;
        color: #cf0000;
        left: 165rpx;
        margin-top: 5rpx;
        background-color: rgba(243, 48, 48, 0.1);
      }

      & > image {
        width: 16rpx;
        height: 16rpx;
        top: 35%;
        // padding-top: 10rpx;
      }
    }
  }

  & > text {
    color: #0f0d21;
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }

  .form-item {
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
    padding: 20rpx 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .text-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .text {
      color: #8c8a8a;
      font-size: 28rpx;
    }

    & > view {
      flex: 1;

      ::v-deep .uni-input {
        color: #8c8a8a;
        font-size: 28rpx;
      }
    }

    &:last-child {
      border-bottom: 0;
    }

    & > text {
      width: 220rpx;
      color: #0f0d21;
      font-size: 28rpx;
      flex-shrink: 0;
    }
  }
}

::v-deep .uni-easyinput {
  height: 40rpx;
}

::v-deep .uni-easyinput__content {
  height: 40rpx;
}

::v-deep .uni-easyinput__content-input {
  height: 40rpx !important;
  padding-left: 0 !important;
}

.main-box-t {
  display: flex;
  justify-content: space-between;

  & > view {
    display: flex;
    align-items: center;
  }
}

.main-box-b {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;

  .item {
    width: 295rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: rgba(140, 138, 138, 0.2);
    color: #8c8a8a;
    font-size: 28rpx;
    position: relative;
    overflow: hidden;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      width: 74rpx;
      height: 24rpx;
      line-height: 24rpx;
      border-radius: 0 10rpx 0 10rpx;
      color: #ffffff;
      background: #e27c8a;
      opacity: 0.7;
      font-size: 16rpx;
      content: "已预约";
    }
  }
}

.recharg-box {
  display: flex;
  width: 682rpx;
  // height: 128rpx;
  // align-items: center;
  justify-content: space-between;

  .recharg-box-c {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
    // justify-content: space-between;

    & > text {
      padding-right: 80rpx;
      font-size: 28rpx;
      color: #0f0d21;
    }

    & > image {
      width: 40rpx;
      height: 40rpx;
      padding-right: 20rpx;
      // left: 20rpx;
    }

    .type-bord {
      &::after {
        content: "";
        flex: 1 1;
        border-right: 3rpx solid #d9d9d9;
        margin: auto;
        padding-left: 60rpx;
      }
    }

    .radio {
      transform: scale(0.7);
    }
  }

  .item {
    // width: 208rpx;
    // height: 80rpx;
    line-height: 128rpx;
    text-align: left;
    color: #0f0d21;
    font-size: 32rpx;
    // justify-content: space-between;
    // border: 2rpx solid rgba(0, 0, 0, 0.1);
    // margin-right: 32rpx;

    &-s {
      color: #ec606f;
    }

    &-p {
      border: 2rpx solid #ec606f;
    }
  }
}
</style>
